<template>
  <div v-loading="loading">
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">添加</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="i-ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon style="fontsize: 12px" icon="ant-design:down-outlined" />
          </a-button>
        </a-dropdown>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <InputForm @register="registerInputForm" @success="reload" />
    <ConfigTmplList @register="registerConfigTmplList" @success="handleSaveConfig" />
  </div>
</template>
<script lang="ts" name="config" setup>
  import { ref } from "vue"
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import InputForm from "./form.vue"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./data"
  import * as configApi from '/@/api/infra/config'
  import { ConfigStatus } from '/@/views/sys/configTmpl/data'
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useRouter } from "vue-router"
  import { useModal } from "/@/components/Modal"
  import { Icon } from "/@/components/Icon"
  import ConfigTmplList from "./tmpl/ConfigTmplList.vue"

  const { createMessage } = useMessage();
  const loading = ref(false)
  const [registerConfigTmplList, { openModal: openConfigTmplList }] = useModal()
  const [registerInputForm, { openDrawer: openInputForm }] = useDrawer()

  const { tableContext } = useListPage({
    designScope: "config",
    tableProps: {
      title: "参数配置",
      rowKey: 'configKey',
      api: configApi.pageConfig,
      columns: columns,
      bordered: false,
      formConfig: {
        schemas: searchFormSchema,
        fieldMapToTime: [["fieldTime", ["beginDate", "endDate"], "YYYY-MM-DD HH:mm:ss"]],
      },
      actionColumn: {
        width: 150,
        title: "操作",
        dataIndex: "action",
        fixed: "right",
        slots: { customRender: "action" },
      },
    }
  })

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext


  const handleAdd = () => {
    openConfigTmplList(true, {})
  }

  async function handleDelete(record) {
    await configApi.deleteConfig({ configKey: record.configKey }, reload)
  }

  async function batchHandleDelete() {
    await configApi.batchDeleteConfig({ configKeys: selectedRowKeys.value }, reload)
  }

  const handleEditConfig = (record) => {
    openInputForm(true, {
      record,
      isUpdate: true,
    })
  }

  function getActions(record) {
    return [
      {
        label: "删除",
        color: "error",
        disabled: record.citationCount > 0,
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "编辑",
        onClick: handleEditConfig.bind(null, record),
      },
      {
        label: "禁用",
        ifShow: record.status === ConfigStatus.NORMAL,
        color: "error",
        popConfirm: {
          title: "确定禁用吗?",
          confirm: handleUpdateStatus.bind(null, record.id, ConfigStatus.DISABLE),
        },
      },
      {
        label: "启用",
        color: "success",
        ifShow: record.status === ConfigStatus.DISABLE,
        popConfirm: {
          title: "确定启用吗?",
          confirm: handleUpdateStatus.bind(null, record.id, ConfigStatus.NORMAL),
        },
      },
    ]
  }

  const handleSaveConfig = async (record) => {
    loading.value = true
    try {
      console.log('SelectConfigTmpl', record)
      await configApi.saveOrUpdate(record, false)
    } finally {
      loading.value = false
    }
    reload()
  }

  const handleUpdateStatus = async (id, status) => {
    await configApi.updateStatus({ id, status })
    reload()
  }

  function getDropDownAction(record) {
    return []
  }
</script>
